<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<fmt:setBundle basename="ApplicationMessage" />
<fmt:setLocale value="zh_CN" />

<head>
<link rel="stylesheet" href="${ctx.resource}/css/newcss.css">
<script src="${ctx.resource}/js/jquery.easyui.min.js"></script>

<style>
 div.panel,div.select-bar{
min-width:43%;
display:inline-block !important;
    width: 43%;
    min-height:300px;
}
div.select-bar > div.panel{width:100%;}

div.btn-bar{display:inline-block !important;width:60px;vertical-align: top;}
div.btn-bar p{margin-top:16px;}
div.btn-bar p .btn{width:50px;height:30px;cursor:pointer;font-family:simsun;font-size:14px;}
div.form-group{
display:inline-block;
width:45%;
}
div.form-group .pull-left.col-xs-6{
	width:60% !important;
}

.demo2do-form-group {
  margin-left: 0px;
  margin-right: 0px; 
  margin-bottom: 0px; 
  padding: 15px 0px; 
  border-bottom: 2px solid #DFDFDF;
  display:inline-block;
}

</style>
</head>


<script type="text/javascript">


	function clickEvent(){
		
		var menus = "";
		var submenus = "";
		var node = $('#select2').tree('getChildren');
		
		for(var p in node){
			if(node[p].level == 0){
				if(menus == ""){
					menus += '"'+node[p].id + '"';
				}else{
					menus += ',"' + node[p].id + '"';
				}
			}else if(node[p].level == 1){
				if(submenus == ""){
					submenus += '"' + node[p].id + '"';
				}else{
					submenus += ',"' + node[p].id + '"';
				}
			}
		}
		
		$('#menus').val(menus);
		$('#submenus').val(submenus);
	   	$('form').shiftform({
	   		parameters:$('#submitform').serialize()
	   	});
	   	
	   	alert($('#submitform').serialize());
		
	}
	

	$(function() {
		//移到右边
		$('#add').click(function() {
			var node1 = $('#select1').tree('getChecked');
			var node2 = $('#select2').tree('getChecked');
			console.log(9999999999999);
			console.log(node1);

			//先判断是否有选中
			if (node1 && node1.length == 0) {
				alert("请选择需要移动的选项")
			} else {
				//获取选中的选项，删除并追加给对方
				/* var nodes = [{
					"id":13,
					"text":"Raspberry"
				},{
					"id":14,
					"text":"Cantaloupe"
				}];
				$('#select2').tree('append', {
					parent:node.target,
					data:nodes
				}); */
				var nodes;
				var list = new List();
				for ( var i in node1) {
					nodes = [ {
						"id" : node1[i].id,
						"text" : node1[i].text,
						"children" : node1[i].children
					} ]
					list.add(nodes);
				}

				console.log(8888888888888);
				console.log(list);
				console.log(list.getAll());

				$('#select2').tree('append', {
					parent : node2.target,
					data : list.value()
				});

			}
		});

		//移到左边
		$('#remove').click(function() {
			var node = $('#select2').tree('getChecked');
			//先判断是否有选中
			if (node && node.length == 0) {
				alert("请选择需要移动的选项")
			} else {
				//获取选中的选项，删除并追加给对方
				var nodes = [ {
					"id" : 13,
					"text" : "Raspberry"
				}, {
					"id" : 14,
					"text" : "Cantaloupe"
				} ];
				$('#select1').tree('append', {
					parent : node.target,
					data : nodes
				});
			}
		});

		//全部移到右边
		$('#add_all').click(function() {

			var node = $('#select1').tree('getRoot');

			console.log(1111111111);
			console.log(node);
			console.log(node.toString());

			var node1 = $('#select1').tree('getChecked');

			console.log(node1);
			console.log(2222222222);

			$('#select2').tree('append', {
				parent : node.target,
				data : [ {
					"id" : 13,
					"text" : "Raspberry"
				}, {
					"id" : 14,
					"text" : "Cantaloupe"
				} ]
			});

			$('#select1').tree('remove', node.target);
		});

		//全部移到左边
		$('#remove_all').click(function() {
			$('#select2 option').appendTo('#select1');
		});

		function getChecked() {
			var nodes = $('#select1').tree('getChecked');
			var s = '';
			for (var i = 0; i < nodes.length; i++) {
				if (s != '')
					s += ',';
				s += nodes[i].text;
			}
			alert(s);
		}

		//双击选项
		 $('#select2').dblclick(function() { //绑定双击事件
			var node = $('#select2').tree('getRoot');
			if (node) {
				var nodes = [ {
					"id" : 13,
					"text" : "Raspberry1"
				}, {
					"id" : 14,
					"text" : "Cantaloupe1"
				} ];
				$('#select1').tree('append', {
					parent : node.target,
					data : nodes
				});
			}
		}); 

		//双击选项
		/* $('#select2').dblclick(function() {
			var node = $('#select2').tree('getChecked');
			if (node) {
				var nodes = [ {
					"id" : 15,
					"text" : "Raspberry2"
				}, {
					"id" : 16,
					"text" : "Cantaloupe2"
				} ];
				$('#select2').tree('append', {
					parent : node.target,
					data : nodes
				});
			}
		}); */

	});
</script>


<div class="modal-dialog demo2do-modal-dialog" style="width:900px;">

  <div class="modal-content">

    <div class="modal-header beast-breadcrumb no-bottom-border clearfix">

      <h2><i class="glyphicon glyphicon-fire" title=""></i>&nbsp;&nbsp;<span>添加新角色</span></h2>

      <button type="button" class="close" data-dismiss="modal">&times;</button>

    </div>

    <form class="form-horizontal" id="submitform" method="POST" action="${ctx.host}/menus/saveRoleMenus" data-validate="true">

      <div class="modal-body">
      
      	<div class="form-group demo2do-form-group">
          <label class="col-xs-4 control-label">角色名称</label>
          <div class="pull-left col-xs-6" style="">
            <input type="text" class="form-control" id="description" name="description" data-validate="required">
          </div>
        </div>
        
        <div class="form-group demo2do-form-group">
          <label class="col-xs-4 control-label">角色编号</label>
          <div class="pull-left col-xs-6" style="">
            <input type="text" class="form-control" id="name" name="name" data-validate="required">
          </div>
        </div>
        <input type="hidden" name="menus" id="menus">
        <input type="hidden" name="submenus" id="submenus">
        <!--效果html开始-->
		<!-- <div style="margin:20px 0;">
			<a href="#" class="easyui-linkbutton" onclick="getChecked1()">GetChecked</a> 
		</div> -->
		<div class="easyui-panel" style="">
			<ul id="select1" class="easyui-tree" data-options="url:'${ctx.host}/menus/loadSelectedMenu',method:'get',animate:false,dnd:true,lines:true,checkbox:false"></ul>
		</div>
		
		<div class="btn-bar">
		    <p><span id="add"><input type="button" class="btn" value=">" title="移动选择项到右侧"/></span></p>
		    <p><span id="add_all"><input type="button" class="btn" value=">>" title="全部移到右侧"/></span></p>
		    <p><span id="remove"><input type="button" class="btn" value="<" title="移动选择项到左侧"/></span></p>
		    <p><span id="remove_all"><input type="button" class="btn" value="<<" title="全部移到左侧"/></span></p>
		</div>
		<div class="select-bar">
		    <!-- <div style="margin:20px 0;">
				<a href="#" class="easyui-linkbutton" onclick="getChecked2()">GetChecked</a> 
			</div> -->
			<div class="easyui-panel" style="padding:5px;">
				<ul id="select2" class="easyui-tree" data-options="url:'${ctx.host}/menus/tree_data2',method:'get',animate:true,dnd:true,lines:true,checkbox:false"></ul>
			</div>
		</div>	
	
		</div>
		<!--效果html结束-->

      <div class="modal-footer">
        <button type="btn-ajax" class="btn btn-success btn-shadow btn-shadow-success demo2do-btn" onclick="clickEvent();">确定</button>&nbsp;&nbsp;&nbsp;&nbsp;
        <button type="button" class="btn btn-default btn-shadow btn-shadow-default demo2do-btn" data-dismiss="modal">取消</button>
      </div>
      </div>


    </form>

  </div>

</div>

<script type="text/javascript">

	$(document).ready(function() {
	  $('form').shiftform({
	        beforeSubmit:function(el){
	             $('form').trigger("validate.ajax.submit");
	            return $.bt_validate.result[$.bt_validate.form_id]    
	        }
	  	})
	  });
	  
</script>
